<template>
  <!-- 发布商品：03、编辑商品详情 -->
  <div class="posting-product-details">
    <el-tabs>
      <!-- <el-tab-pane :label="this.$i18n.t('product.chineseDetails')"> -->
      <el-tab-pane>
        <div class="prod-det-box">
          <div class="prod-content" v-if="canEdit">
            <tiny-mce
              ref="content"
              id="detail"
              v-model="content"
              tinymceUploadType="prod"
            ></tiny-mce>
          </div>
          <!-- 详情预览 -->
          <div class="details-preview">
            <div class="preview-box-title">
              {{ $t("product.detailPagePreviewImage") }}
            </div>
            <div v-html="content" class="preview-con"></div>
          </div>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane :label="this.$i18n.t('product.englishDetails')"> -->
      <!-- <el-tab-pane>
        <div class="prod-det-box">
          <div class="prod-content">
            <tiny-mce
              ref="content"
              id="detailEn"
              v-model="shopDetailsEn"
              tinymceUploadType="prod"
            ></tiny-mce>
          </div>
          <div class="details-preview">
            <div class="preview-box-title">
              {{ $t("product.detailPagePreviewImage") }}
            </div>
            <div v-html="shopDetailsEn" class="preview-con"></div>
          </div>
        </div>
      </el-tab-pane> -->
    </el-tabs>

    <div class="foot-btn" v-if="canEdit">
      <el-button type="infor" size="small" @click="preStep">{{
        $t("shopProcess.previousStep")
      }}</el-button>
      <el-button type="primary" size="small" @click="nextStep">{{
        $t("shopProcess.nextStep")
      }}</el-button>
    </div>
  </div>
</template>

<script>
  import TinyMce from "@/components/tiny-mce";
  import { formatHtml } from "@/utils/index.js";
  export default {
    components: {
      TinyMce,
    },
    props: {
      value: {
        type: Object,
        default: {},
      },
      canEdit: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        content: "",
        // shopDetailsEn: "",
      };
    },
    watch: {
      content(newVal, oldVal) {
        if (this.canEdit) {
          this.$emit("updateContent", newVal, "cn");
          console.log("cn", newVal);
        }
      },
      // shopDetailsEn(newVal, oldVal) {
      //   this.$emit("updateContent", newVal, "en");
      //   console.log("en", newVal);
      // },
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.content = this.value.content
          ? this.DOMPurify.sanitize(formatHtml(this.value.content))
          : "";
        // this.shopDetailsEn = this.value.shopDetailsEn
        //   ? this.DOMPurify.sanitize(formatHtml(this.value.shopDetailsEn))
        //   : "";
      },
      preStep() {
        this.$emit("preStep");
      },
      nextStep() {
        this.$emit("nextStep");
      },
      formVoidInterdiction() {
        return Promise.resolve(true);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .posting-product-details {
    .prod-det-box {
      display: flex;
      justify-content: space-between;
      .prod-content {
        width: 60%;
        margin-right: 30px;
        // 富文本编辑框样式修改
        & ::v-deep .tinymce-container {
          .mce-panel,
          .mce-container-body.mce-flow-layout {
            border-color: #dcdcdc !important;
          }
          .mce-edit-area {
            border-top: 0;
          }
        }
      }

      // 详情预览
      .details-preview {
        width: 40%;
        border: 1px solid #dcdcdc;
        box-sizing: border-box;
        .preview-box-title {
          height: 45px;
          line-height: 45px;
          background: #f9f9f9;
          text-align: center;
          border-bottom: 1px solid #dcdcdc;
        }
        .preview-con {
          height: auto;
          // max-height: 580px;
          overflow-y: auto;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }

      @media only screen and (min-width: 1470px) {
        //当屏幕最小1470时
        .preview-con {
          max-height: 580px;
        }
      }
      @media only screen and (max-width: 1469px) {
        //当屏幕最大1469时
        .preview-con {
          max-height: 623px;
        }
      }
    }
  }

  .save {
    margin-top: 20px;
    width: 100px;
  }
  .posting-product-details::v-deep .el-tabs__nav-wrap.is-top {
    display: none;
  }
  .foot-btn {
    margin: 30px 140px;
  }
</style>
